<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page isELIgnored="false"%>

<html>
<head>

	<link rel="stylesheet" type="text/css" href="css/cssForm.css">
	<script type="text/javascript" src="js/jquery-1.4.1.js"> </script>	
	<script type="text/javascript" src="js/mapsUtils.js"> </script>
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAZA3w8jEem5JlBtbgiylugRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRtd1TYFkicSI0Fz2ds_MoXhoumtQ" type="text/javascript"></script>

	<script type="text/javascript">	
				
	
	function loadMap() {

		var urlService = "http://localhost:8888/resources/touristPoint/" + ${param.id};
		
		//Obtem lista de pontos e seta-os no mapa
		$.getJSON(urlService,
	        	function(data){	  	          			      	      								
					insertRowTable(data);					
				});											 
	}	

	 // Função responsável por inserir linhas na tabela
    function insertRowTable(point) {
    	
        // Captura a referência da tabela com id minhaTabela
        var table = document.getElementById("listPointsTable");
        // Captura a quantidade de linhas já existentes na tabela
        var numOfRows = table.rows.length;
        // Captura a quantidade de colunas da última linha da tabela
        var numOfCols = 2;

        // Insere uma linha no fim da tabela.
        var newRow = table.insertRow(numOfRows);                 
        
     	// Insere uma coluna na nova linha 
        cellIcon = newRow.insertCell(0);             
           
        // Insere um conteúdo na coluna
        cellIcon.innerHTML = "<b>" + point.name + "</b> <br/>" + point.address + "<br/>" + point.description;             	
    }
		 	
	
	</script>
	<title>Detalhes do Points</title>
</head>

<body onload="loadMap()"  onunload="GUnload()">
	
<div class="pageInstruction">
Details...
</div>

<div id="contentLayer">

	<table class="t1">
		<tr valign="top">
		
			<!-- Coluna com descricao dos pontos -->
			<td class="formContentStyle">		
			<div class="contentHolder">
				<div class="inputLayer">			
					
					<table id="listPointsTable" class="t2" class="contentHolderCell" border="0" cellspacing="0" cellpadding="0" >
					
					<!-- List of registred points -->
					<tr>
										
					</tr>						
						
											
					</table>
				</div>
			</div>		
					
			</td>
	
			<!-- Coluna do mapa -->
			<td valign="top" class="preview" >
				<!-- Div onde o mapa será renderizado -->
				<div id="map_canvas" style="widht: 200px; height: 350px"></div>												
			</td>
			<!-- FIM Coluna do mapa -->
		</tr>
	
	</table>
</div>
<br>
<div class="footer" align="center">page footer...</div>
</body>
</html>